<template>
  <div class="main">
    <govheader
      :title="title"
      style="width: 100%; position: absolute"
    ></govheader>
    <video style="width: 100%" autoplay loop muted v-if="zfNameflag">
      <source :src="PATH_TO_MP4" type="video/mp4" />
    </video>
    <div class="box" v-if="zfNameflag">
      <div class="boxLeft">
        <div class="boxLeftMenu boxLeftMenu1">
          <div class="button1" @click="goRoute('ChemicalIndustry','产业总览')">
            产业总览
          </div>
          <div class="wireway1"></div>
        </div>
        <div class="boxLeftMenu boxLeftMenu2">
          <div class="button2" @click="goRoute('zfoperationalmonitoring','产业运行监测')">
            产业运行监测
          </div>
          <div class="wireway2"></div>
        </div>
        <div class="boxLeftMenu boxLeftMenu3">
          <div class="button3" @click="goRoute('zfPerMuBenefitTwo','亩均效益')">
            亩均效益
          </div>
          <div class="wireway3"></div>
        </div>
        <div class="boxLeftMenu boxLeftMenu4">
          <div class="button4" @click="goRoute('zfIndustrialChainMapTwo','产业链图谱')">
            产业链图谱
          </div>

          <div class="wireway4"></div>
        </div>
        <div class="boxLeftMenu boxLeftMenu5">
            <div class="button5" @click="goRoute('zfParkOverviewTwo','园区管理')">
            园区管理
          </div>
          <div class="wireway5"></div>

        </div>
      </div>
      <div class="boxRight" style="float: right">
        <div class="boxRightMenu boxRightMenu6">
          <div class="wireway6"></div>
          <!-- <div class="button6">安全总览</div> -->
          <div class="button6" @click="goRoute('zfSafeAndContingency','安全总览')">
            安全总览
          </div>
        </div>
        <div class="boxRightMenu boxRightMenu7">
          <div class="wireway7"></div>
          <div class="button7 zhihui">危化品总览</div>
          <!-- <div class="button7" @click="goRoute('zfDangerousGoodsTwo','危化品总览')">危化品总览</div> -->
        </div>
        <div class="boxRightMenu boxRightMenu8">
          <div class="wireway8"></div>
          <div class="button8 zhihui">环境保护</div>
          <!-- <div class="button8" @click="goRoute('zfEnvironmentalConservationTwo','环境保护')">环境保护</div> -->
        </div>
        <div class="boxRightMenu boxRightMenu9">
          <div class="wireway9"></div>
          <!-- <div class="button9">智能制造诊断评估</div> -->
          <div class="button9" @click="goRoute('zfDiagnosticEvaluationTwo','智能制造诊断评估')">
            智能制造诊断评估
          </div>
        </div>
        <div class="boxRightMenu boxRightMenu10">
          <div class="wireway10"></div>
          <div class="button10" @click="goRoute('zfDataSharingTwo','数据共享')">
            数据共享
          </div>
        </div>
      </div>
    </div>
    <div class="menu">
      <!-- <span @click="iconClick()">v1.0
            <i class="el-icon--right el-icon-arrow-down"></i> -->
      <!-- <i class="el-icon--right " :class="type === false ? 'el-icon-arrow-up' : 'el-icon-arrow-down'"></i> -->
      <!-- </span> -->
      <!-- <ul class="menubody" :style="type === true? 'opacity: 1':'opacity: 0'"> -->
      <ul class="menubody">
        <li @click="goOne('zfSafetyProduction','安全生产v1.0')">安全生产v1.0</li>
        <li @click="goOne('zfEnergyConsumption','能源消耗v1.0')">能源消耗v1.0</li>
        <li @click="goOne('zfEnvironmentalProtection','环境保护v1.0')">环境保护v1.0</li>
        <li @click="goOne('zfParkManagement','园区管理v1.0')">园区管理v1.0</li>
      </ul>
    </div>
    <!-- <div class="box1">
        <div class="boxLeft"></div>
        <div class="boxRight" style="float:right"></div>
    </div> -->
  </div>
</template>
<script>
import mp4Path from '../../../../assets/img/industry/home/背景_x28.mp4'
import govheader from '@/components/govheader2'
import { buriedPoint } from '@/utils/user'
import dd from 'gdt-jsapi'
export default {
  components: { govheader },
  data () {
    return {
      zfNameflag: true,
      PATH_TO_MP4: '',
      title: '化工产业大脑',
      type: false
    }
  },
  created () {
    if (window.SITE_CONFIG['sitURL'] === 'https://www.plantmate.com/api') {
      dd.getAuthCode({})
        .then((res) => {
          if (res) {
            let params = {
              applicationFlag: '20',
              authCode: res.auth_code
            }
            this.$http
              .post(`/home/sys/loginfree/authentication`, params)
              .then(({ data: res }) => {
                console.log('res2:', res)
                localStorage.setItem('buriedPointInformation',JSON.stringify(res.data))
                this.$store.commit('zfName', res.data.lastName)
                if (res.code !== 0) {
                  this.zfNameflag = false
                }
                buriedPoint('home')
              })
              .catch(() => {
                this.zfNameflag = false
              })
          }
        })
        .catch(() => {
          this.zfNameflag = false
        })
    }
  },
  mounted () {
    this.PATH_TO_MP4 = mp4Path
  },
  methods: {
    goRoute (val,name) {
      buriedPoint(name)
      this.$router.push({ name: val })
    },
    iconClick () {
      this.type = !this.type
    },
    goOne (val,name) {
      buriedPoint(name)
      this.$router.push({ name: val })
    },
    // formatDateTime (value) {
    //   let now = new Date(value)
    //   let year = now.getFullYear() // 年
    //   let month = now.getMonth() + 1 // 月
    //   let day = now.getDate() // 日
    //   let hour = now.getHours() // 时
    //   let minutes = now.getMinutes() // 分
    //   let seconds = now.getSeconds() // 秒
    //   let clock = year + '-'
    //   if (month < 10) clock += '0'
    //   clock += month + '-'
    //   if (day < 10) clock += '0'
    //   // clock += day
    //   clock += day + ' '
    //   if (hour < 10) clock += '0'
    //   clock += hour + ':'
    //   if (minutes < 10) clock += '0'
    //   clock += minutes + ':'
    //   if (seconds < 10) clock += '0'
    //   clock += seconds
    //   return clock
    // },
  }
}
</script>
<style lang='scss' scoped>
.main {
  position: relative;
  background: #041565;
}
.box {
  position: absolute;
  width: 90%;
  height: 70%;
  top: 60%;
  left: 50%;
  margin-top: -25%;
  margin-left: -45%;
  // background-color: #ffffff;
  overflow: hidden;
  > div {
    width: 50%;
    height: 100%;
    float: left;
    position: relative;
    overflow: hidden;
  }
}
.box1 {
  position: absolute;
  z-index: 100;
  width: 90%;
  height: 70%;
  top: 60%;
  left: 50%;
  margin-top: -25%;
  margin-left: -45%;
  // background-color: #ffffff;
  overflow: hidden;
  > div {
    width: 50%;
    height: 100%;
    float: left;
    // background-color: aqua;
  }
}
.boxLeftMenu {
  position: absolute;
  > div {
    float: left;
  }
  > div:first-child {
    min-width: 160px;
    height: 60px;
    line-height: 60px;
    color: #68faff;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 2px;
    text-align: center;
    cursor: pointer;
    background-image: url("../../../../assets/img/industry/home/按钮背景1@2x.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
  }
  > div:first-child:hover {
    background-color: #68faff;
  }
  > div:last-child {
    background-repeat: no-repeat;
    background-size: 100% 100%;
  }
  .wireway1 {
    width: 200.5px;
    height: 86.5px;
    margin-top: 22px;
    background-image: url("../../../../assets/img/industry/home/线段1@2x.png");
    // animation: anmiteX1 2s linear 1 forwards;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    backface-visibility: hidden;
  }
  .wireway2 {
    width: 268px;
    height: 50.5px;
    margin-top: 22px;
    background-image: url("../../../../assets/img/industry/home/线段2@2x.png");
    // animation: anmiteX2 2s linear 1 forwards;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    backface-visibility: hidden;
  }
  .wireway3 {
    width: 271.5px;
    height: 22.5px;
    margin-top: 22px;
    background-image: url("../../../../assets/img/industry/home/线段3@2x.png");
    // animation: anmiteX3 2s linear 1 forwards;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    backface-visibility: hidden;
  }
  .wireway4 {
    width: 252px;
    height: 64px;
    margin-top: -22px;
    background-image: url("../../../../assets/img/industry/home/线段4@2x.png");
    // animation: anmiteX4 2s linear 1 forwards;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    backface-visibility: hidden;
  }
  .wireway5 {
    width: 200.5px;
    height: 80px;
    margin-top: -38px;
    background-image: url("../../../../assets/img/industry/home/线段5@2x.png");
    // animation: anmiteX5 2s linear 1 forwards;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    backface-visibility: hidden;
  }
}
.boxLeftMenu1 {
  opacity: 0;
  animation: anmiteX1 1s linear 1 forwards;
  // width: 350.5px;
  // height: 108.5px;
  right: 130px;
  top: 40px;
}
.boxLeftMenu2 {
  opacity: 0;
  animation: anmiteX2 1s linear 0.5s 1 forwards;
  // width: 418px;
  // height: 72.5px;
  right: 180px;
  top: 160px;
}
.boxLeftMenu3 {
  opacity: 0;
  animation: anmiteX3 1s linear 1s 1 forwards;
  // width: 421.5px;
  // height: 60px;
  right: 195px;
  top: 270px;
}
.boxLeftMenu4 {
  opacity: 0;
  animation: anmiteX4 1s linear 1.5s 1 forwards;
  // width: 402px;
  // height: 60px;
  right: 180px;
  top: 380px;
}
.boxLeftMenu5 {
  opacity: 0;
  animation: anmiteX5 1s linear 2s 1 forwards;
  // width: 350.5px;
  // height: 60px;
  right: 110px;
  top: 490px;
}
.boxRightMenu {
  position: absolute;
  > div {
    float: left;
  }
  > div:first-child {
    background-repeat: no-repeat;
    background-size: 100% 100%;
  }
  > div:last-child {
    min-width: 160px;
    height: 60px;
    line-height: 60px;
    color: #68faff;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 2px;
    text-align: center;
    cursor: pointer;
    background-image: url("../../../../assets/img/industry/home/按钮背景1@2x.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
  }
  > div:last-child:hover {
    background-color: #68faff;
  }
  .zhihui {
    color: rgba(255, 255, 255, 0.5) !important;
    background-image: url("../../../../assets/img/industry/home/按钮置灰.png") !important;
  }
  .zhihui:hover {
    background-color: rgba(255, 255, 255, 0) !important;
  }
  .wireway6 {
    width: 200.5px;
    height: 86.5px;
    margin-top: 22px;
    background-image: url("../../../../assets/img/industry/home/线段6@2x.png");
    // animation: anmiteX1 2s linear 1 forwards;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    backface-visibility: hidden;
  }
  .wireway7 {
    width: 268px;
    height: 50.5px;
    margin-top: 22px;
    background-image: url("../../../../assets/img/industry/home/线段7@2x.png");
    // animation: anmiteX2 2s linear 1 forwards;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    backface-visibility: hidden;
  }
  .wireway8 {
    width: 271.5px;
    height: 22.5px;
    margin-top: 22px;
    background-image: url("../../../../assets/img/industry/home/线段8@2x.png");
    // animation: anmiteX3 2s linear 1 forwards;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    backface-visibility: hidden;
  }
  .wireway9 {
    width: 252px;
    height: 64px;
    margin-top: -22px;
    background-image: url("../../../../assets/img/industry/home/线段9@2x.png");
    // animation: anmiteX4 2s linear 1 forwards;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    backface-visibility: hidden;
  }
  .wireway10 {
    width: 200.5px;
    height: 80px;
    margin-top: -38px;
    background-image: url("../../../../assets/img/industry/home/线段10@2x.png");
    // animation: anmiteX5 2s linear 1 forwards;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    backface-visibility: hidden;
  }
}
.boxRightMenu6 {
  opacity: 0;
  animation: anmiteX1 1s linear 1 forwards;
  // width: 350.5px;
  // height: 108.5px;
  left: 130px;
  top: 40px;
}
.boxRightMenu7 {
  opacity: 0;
  animation: anmiteX2 1s linear 0.5s 1 forwards;
  // width: 418px;
  // height: 72.5px;
  left: 180px;
  top: 160px;
}
.boxRightMenu8 {
  opacity: 0;
  animation: anmiteX3 1s linear 1s 1 forwards;
  // width: 421.5px;
  // height: 60px;
  left: 195px;
  top: 270px;
}
.boxRightMenu9 {
  opacity: 0;
  animation: anmiteX4 1s linear 1.5s 1 forwards;
  // width: 402px;
  // height: 60px;
  left: 180px;
  top: 380px;
}
.boxRightMenu10 {
  opacity: 0;
  animation: anmiteX5 1s linear 2s 1 forwards;
  // width: 350.5px;
  // height: 60px;
  left: 110px;
  top: 490px;
}
@keyframes anmiteX1 {
  from {
    opacity: 0;
    // left: 100%;
    // -webkit-transform: translateX(-360px);
    // width: 0;
  }
  to {
    opacity: 1;
    // left: 200.5px;
    // -webkit-transform: translateX(0);
    // width: 200.5px;
  }
}
@keyframes anmiteX2 {
  from {
    opacity: 0;
    // left: 100%;
    // -webkit-transform: translateX(-360px);
    // width: 0;
  }
  to {
    opacity: 1;
    // left: 200.5px;
    // -webkit-transform: translateX(0);
    // width: 268px;
  }
}
@keyframes anmiteX3 {
  from {
    opacity: 0;
    // left: 100%;
    // -webkit-transform: translateX(-360px);
    // width: 0;
  }
  to {
    opacity: 1;
    // left: 200.5px;
    // -webkit-transform: translateX(0);
    // width: 271.5px;
  }
}
@keyframes anmiteX4 {
  from {
    opacity: 0;
    // left: 100%;
    // -webkit-transform: translateX(-360px);
    // width: 0;
  }
  to {
    opacity: 1;
    // left: 200.5px;
    // -webkit-transform: translateX(0);
    // width: 252px;
  }
}
@keyframes anmiteX5 {
  from {
    opacity: 0;
    // left: 100%;
    // -webkit-transform: translateX(-360px);
    // width: 0;
  }
  to {
    opacity: 1;
    // left: 200.5px;
    // -webkit-transform: translateX(0);
    // width: 200.5px;
  }
}
.el-dropdown {
  position: fixed;
  right: 30px;
  bottom: 100px;
  .el-dropdown-link {
    cursor: pointer;
    color: #409eff;
    font-weight: 600;
  }
  .el-icon-arrow-down {
    font-size: 14px;
    font-weight: 600;
  }
}
.el-dropdown-menu {
  background-color: transparent !important;
  border: none !important;
  .el-dropdown-menu__item {
    min-width: 130px !important;
    color: #409eff !important;
  }
  .popper__arrow {
    display: none !important;
  }
}
.menu {
  position: absolute;
  right: 30px;
  bottom: 30px;
  color: #68faff;
  font-weight: 600;
  text-align: right;
  span {
    cursor: pointer;
    padding: 5px 10px;
  }
  .menubody {
    li {
      cursor: pointer;
      list-style: none;
      padding: 8px 10px;
      margin-top: 10px;
      background-image: url("../../../../assets/img/industry/home/按钮背景1@2x.png");
      background-repeat: no-repeat;
      background-size: 100% 100%;
    }
    li:hover {
      background-color: #68faff;
    }
  }
}
</style>
